<template>
  <button
    class="glass-button"
    :class="[
      `glass-button--${type}`,
      `glass-button--${size}`,
      { 'glass-button--loading': loading },
      { 'glass-button--disabled': disabled }
    ]"
    :type="htmlType"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <div class="glass-button__content">
      <div v-if="loading" class="glass-button__loading">
        <div class="loading-spinner"></div>
      </div>
      <slot v-if="!loading" name="icon"></slot>
      <span v-if="!loading || $slots.default" class="glass-button__text">
        <slot></slot>
      </span>
    </div>
    <div class="glass-button__ripple"></div>
  </button>
</template>

<script setup lang="ts">
interface Props {
  type?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'ghost'
  size?: 'small' | 'medium' | 'large'
  loading?: boolean
  disabled?: boolean
  htmlType?: 'button' | 'submit' | 'reset'
}

interface Emits {
  (e: 'click', event: MouseEvent): void
}

const props = withDefaults(defineProps<Props>(), {
  type: 'primary',
  size: 'medium',
  loading: false,
  disabled: false,
  htmlType: 'button'
})

const emit = defineEmits<Emits>()

const handleClick = (event: MouseEvent) => {
  if (!props.disabled && !props.loading) {
    emit('click', event)
  }
}
</script>

<style scoped>
.glass-button {
  position: relative;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: inherit;
  outline: none;
}

.glass-button:focus {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

/* 尺寸变体 */
.glass-button--small {
  padding: 8px 16px;
  font-size: 14px;
  min-height: 32px;
}

.glass-button--medium {
  padding: 12px 24px;
  font-size: 16px;
  min-height: 40px;
}

.glass-button--large {
  padding: 16px 32px;
  font-size: 18px;
  min-height: 48px;
}

/* 类型变体 */
.glass-button--primary {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(37, 99, 235, 0.9) 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.glass-button--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 1) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.glass-button--secondary {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(124, 58, 237, 0.9) 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

.glass-button--secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(124, 58, 237, 1) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.glass-button--success {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.8) 0%, rgba(21, 128, 61, 0.9) 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

.glass-button--success:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(21, 128, 61, 1) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.glass-button--warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.8) 0%, rgba(217, 119, 6, 0.9) 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.glass-button--warning:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.9) 0%, rgba(217, 119, 6, 1) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.glass-button--danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.8) 0%, rgba(220, 38, 38, 0.9) 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.glass-button--danger:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(220, 38, 38, 1) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.glass-button--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.glass-button--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* 状态变体 */
.glass-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.glass-button--loading {
  cursor: wait;
}

.glass-button__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.glass-button__loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.glass-button__text {
  white-space: nowrap;
}

.glass-button__ripple {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s;
  z-index: 1;
}

.glass-button:hover:not(:disabled) .glass-button__ripple {
  transform: translateX(100%);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .glass-button--large {
    padding: 14px 28px;
    font-size: 16px;
    min-height: 44px;
  }
  
  .glass-button--medium {
    padding: 10px 20px;
    font-size: 14px;
    min-height: 36px;
  }
}
</style>
